﻿@model SMECustomerWebsite.Models.ViewModels.CustomerManager.CustomerPortfolioViewModel
<div class="row">
    <div class="col-md-12">
        <div class="x_panel">
            <div class="x_content">
                @Html.Action("SubMenuCustomer", "System")
                <!--Modal info customer -->
                <div class="modal fade cm-cp-customer-info" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="col-md-12 profile_details">
                                    <div class="well profile_view">
                                        <div class="col-sm-12">
                                            <h2 id="cust_info_name"></h2>
                                            <p><strong>@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader: </strong> <span id="cust_info_industry"></span> </p>
                                            <ul class="list-unstyled">
                                                <li><i class="fa fa-building"></i> <strong>@SMECustomerWebsite.Core.Resources.Resource.AddressHeader: </strong> <span id="cust_info_address"></span> </li>
                                                <li><i class="fa fa-envelope"></i> <strong>Email : </strong><span id="cust_info_email"></span></li>
                                                <li><i class="fa fa-phone"></i> <strong>Office : </strong><span id="cust_info_office"></span></li>
                                                <li><i class="fa fa-phone"></i> <strong>Land Line : </strong><span id="cust_info_landline"></span></li>
                                                <li><i class="fa fa-mobile"></i> <strong>Phone : </strong> <span id="cust_info_phone"></span></li>
                                                <li><i class="fa fa-fax"></i> <strong>Fax : </strong> <span id="cust_info_fax"></span></li>
                                            </ul>
                                        </div>
                                        <div class="col-xs-12 bottom text-center">
                                            <div class="col-xs-12 col-sm-6 emphasis">
                                                <button type="button" class="btn btn-primary btn-xs">
                                                    <i class="fa fa-user"> </i> @SMECustomerWebsite.Core.Resources.Resource.ViewDetailLbl
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                @*<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>*@
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /modals -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>@SMECustomerWebsite.Core.Resources.Resource.SubMme.ToUpper()</h2>
                                <ul class="nav navbar-right panel_toolbox">
                                    <li>
                                        <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                    </li>
                                </ul>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <ul class="nav nav-tabs bar_tabs sme-tabs" role="tablist">
                                    <li id="cm-tc-tc-tab" role="presentation" class="">
                                        @Html.ActionLink(@SMECustomerWebsite.Core.Resources.Resource.SubMsme.ToUpper(), "CustSubSegment", "CustomerManager", null, null)
                                    </li>
                                    <li id="cm-tc-nc-tab" role="presentation" class="">
                                        @Html.ActionLink(@SMECustomerWebsite.Core.Resources.Resource.SubSme.ToUpper(), "CustSubSegmentSME", "CustomerManager", null, null)
                                    </li>
                                    <li id="cm-tc-nc-tab" role="presentation" class="active">
                                        @Html.ActionLink(@SMECustomerWebsite.Core.Resources.Resource.SubMme.ToUpper(), "CustSubSegmentMME", "CustomerManager", null, null)
                                    </li>
                                </ul>
                                <div id="cm-search-box" class="col-md-6 cm-search-box">
                                    <div class="col-md-5">
                                        <select class="search_column_sme form-control" tabindex="-1" required>
                                            <option></option>
                                        </select>
                                        <ul class="parsley-errors-list filled" id="parsley_search_column_sme" style="display:none;">
                                            <li class="parsley-required">@SMECustomerWebsite.Core.Resources.Resource.MessRequiredField</li>
                                        </ul>
                                    </div>
                                    <div class="col-md-7">
                                        <input id="sme_search_textbox" type="text" class="cm_search_textbox form-control" placeholder="Default Input">
                                    </div>
                                </div>
                                @switch (Model.CurrentUser.GroupIdentifier)
                                {
                                    case "1":
                                        <table id="cm-customer-portfolio-sme" class="table custom_table table-bordered table-striped jambo_table">
                                            <thead class="headings">
                                                <tr>
                                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.Zone.ToUpper()</th>
                                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.Branch.ToUpper()</th>
                                                    <th class="column-title">MSBO</th>
                                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.DateOpenCifHeader</th>
                                                    <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.InfoHeader</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                        break;
                                    case "2":
                                    <table id="cm-customer-portfolio-sme" class="table custom_table table-bordered table-striped jambo_table">
                                        <thead class="headings">
                                            <tr>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.Branch.ToUpper()</th>
                                                <th class="column-title">MSBO</th>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.DateOpenCifHeader</th>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.InfoHeader</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                        break;
                                    case "3":
                                    <table id="cm-customer-portfolio-sme" class="table custom_table table-bordered table-striped jambo_table">
                                        <thead class="headings">
                                            <tr>
                                                <th class="column-title">MSBO</th>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.DateOpenCifHeader</th>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.InfoHeader</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                        break;
                                    case "4":
                                    <table id="cm-customer-portfolio-sme" class="table custom_table table-bordered table-striped jambo_table">
                                        <thead class="headings">
                                            <tr>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</th>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</th>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.IndustryHeader</th>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.DateOpenCifHeader</th>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.InfoHeader</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                        break;
                                    default:
                                        break;
                                }

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section scripts
{
    @switch (Model.CurrentUser.GroupIdentifier)
    {
        case "1":
            <script src="/scripts/tableeditable/dataTables.rowsGroup.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    var table_sme = $('#cm-customer-portfolio-sme').DataTable({
                        "order": [[0, 'asc']],
                        "bServerSide": true,
                        "bProcessing": true,
                        "responsive": true,
                        "bAutoWidth": false,
                        "aLengthMenu": [10, 30, 50, 100],
                        "pageLength": 10,
                        rowsGroup: [0, 1, 2],
                        "sAjaxSource": '@Url.Action("CustSubSegmentData", "CustomerManager")' + '?type=mme',
                        "fnServerData": function (sSource, aoData, fnCallback) {
                            $.ajax({
                                "dataType": 'json',
                                "type": "POST",
                                "url": sSource,
                                "data": aoData,
                                "success": fnCallback
                            });
                        },
                        "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                        "sPaginationType": "simple_numbers",//"full_numbers",
                        "aoColumns": [
                                    { "sName": "REGION", "bSortable": false },
                                    { "sName": "BRANCH", "bSortable": false },
                                    { "sName": "DAO", "bSortable": false },
                                    { "sName": "CIF", "bSortable": false },
                                    { "sName": "NAME", "bSortable": false },
                                    { "sName": "VPB INDUSTRY", "bSortable": false },
                                    { "sName": "DATE OPEN CIF", "bSortable": false },
                                    { "sName": "INFO", "bSortable": false }],
                        "aoColumnDefs": [{
                            "aTargets": [7],
                            "mRender": function (data, type, full) {
                                return '<a class=\"btn btn-primary btn-xs\" onclick=\"showCustomerInfo(\'' + full[3] + '\');\"><i class="fa fa-info"></i></a>';
                            }
                        }]
                    });
                    var dataSearch_sme = [{ id: 3, text: 'Region' }, { id: 4, text: 'Branch' }, { id: 5, text: 'MSBO' }, { id: 0, text: 'CIF' }, { id: 1, text: 'Name' }, { id: 2, text: 'VPB Insdustry' }];
                    $(".search_column_sme").select2({
                        placeholder: "Select column",
                        data: dataSearch_sme
                    });

                    table_sme.columns().every(function () {
                        var that = this;

                        $('#sme_search_textbox').on('keyup change', function () {
                            if ($(".search_column_sme").val() == "") {
                                $("#parsley_search_column_sme").show();
                                this.value = "";
                            } else {
                                if (that.index() == $(".search_column_sme").val()) {
                                    that.search(this.value).draw();
                                }
                            }

                        });
                        $(".search_column_sme").on("change", function (e) {
                            $("#parsley_search_column_sme").hide();
                            $('#sme_search_textbox').val('');
                            that.search('').draw();
                        });
                    });
                })
            </script>
            break;
        case "2":
        <script src="/scripts/tableeditable/dataTables.rowsGroup.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var table_sme = $('#cm-customer-portfolio-sme').DataTable({
                    "order": [[0, 'asc']],
                    "bServerSide": true,
                    "bProcessing": true,
                    "responsive": true,
                    "bAutoWidth": false,
                    "aLengthMenu": [10, 30, 50, 100],
                    "pageLength": 10,
                    rowsGroup: [0, 1],
                    "sAjaxSource": '@Url.Action("CustSubSegmentData", "CustomerManager")' + '?type=mme',
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "POST",
                            "url": sSource,
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                    "sPaginationType": "simple_numbers",//"full_numbers",
                    "aoColumns": [
                                    { "sName": "BRANCH", "bSortable": false },
                                    { "sName": "DAO", "bSortable": false },
                                { "sName": "CIF", "bSortable": false },
                                { "sName": "NAME", "bSortable": false },
                                { "sName": "VPB INDUSTRY", "bSortable": false },
                                { "sName": "DATE OPEN CIF", "bSortable": false },
                                { "sName": "INFO", "bSortable": false }],
                    "aoColumnDefs": [{
                        "aTargets": [6],
                        "mRender": function (data, type, full) {
                            return '<a class=\"btn btn-primary btn-xs\" onclick=\"showCustomerInfo(\'' + full[2] + '\');\"><i class="fa fa-info"></i></a>';
                        }
                    }]
                });
                var dataSearch_sme = [{ id: 4, text: 'Branch' }, { id: 5, text: 'MSBO' }, { id: 0, text: 'CIF' }, { id: 1, text: 'Name' }, { id: 2, text: 'VPB Insdustry' }];
                $(".search_column_sme").select2({
                    placeholder: "Select column",
                    data: dataSearch_sme
                });

                table_sme.columns().every(function () {
                    var that = this;

                    $('#sme_search_textbox').on('keyup change', function () {
                        if ($(".search_column_sme").val() == "") {
                            $("#parsley_search_column_sme").show();
                            this.value = "";
                        } else {
                            if (that.index() == $(".search_column_sme").val()) {
                                that.search(this.value).draw();
                            }
                        }

                    });
                    $(".search_column_sme").on("change", function (e) {
                        $("#parsley_search_column_sme").hide();
                        $('#sme_search_textbox').val('');
                        that.search('').draw();
                    });
                });
            })
        </script>
            break;
        case "3":
        <script src="/scripts/tableeditable/dataTables.rowsGroup.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var table_sme = $('#cm-customer-portfolio-sme').DataTable({
                    "order": [[0, 'asc']],
                    "bServerSide": true,
                    "bProcessing": true,
                    "responsive": true,
                    "bAutoWidth": false,
                    "aLengthMenu": [10, 30, 50, 100],
                    "pageLength": 10,
                    rowsGroup: [0],
                    "sAjaxSource": '@Url.Action("CustSubSegmentData", "CustomerManager")' + '?type=mme',
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "POST",
                            "url": sSource,
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                    "sPaginationType": "simple_numbers",//"full_numbers",
                    "aoColumns": [
                                    { "sName": "DAO", "bSortable": false },
                                { "sName": "CIF", "bSortable": false },
                                { "sName": "NAME", "bSortable": false },
                                { "sName": "VPB INDUSTRY", "bSortable": false },
                                { "sName": "DATE OPEN CIF", "bSortable": false },
                                { "sName": "INFO", "bSortable": false }],
                    "aoColumnDefs": [{
                        "aTargets": [5],
                        "mRender": function (data, type, full) {
                            return '<a class=\"btn btn-primary btn-xs\" onclick=\"showCustomerInfo(\'' + full[1] + '\');\"><i class="fa fa-info"></i></a>';
                        }
                    }]
                });
                var dataSearch_sme = [{ id: 5, text: 'MSBO' }, { id: 0, text: 'CIF' }, { id: 1, text: 'Name' }, { id: 2, text: 'VPB Insdustry' }];
                $(".search_column_sme").select2({
                    placeholder: "Select column",
                    data: dataSearch_sme
                });

                table_sme.columns().every(function () {
                    var that = this;

                    $('#sme_search_textbox').on('keyup change', function () {
                        if ($(".search_column_sme").val() == "") {
                            $("#parsley_search_column_sme").show();
                            this.value = "";
                        } else {
                            if (that.index() == $(".search_column_sme").val()) {
                                that.search(this.value).draw();
                            }
                        }

                    });
                    $(".search_column_sme").on("change", function (e) {
                        $("#parsley_search_column_sme").hide();
                        $('#sme_search_textbox').val('');
                        that.search('').draw();
                    });
                });
            })
        </script>
            break;
        case "4":
        <script type="text/javascript">
            $(document).ready(function () {
                var table_sme = $('#cm-customer-portfolio-sme').DataTable({
                    "order": [[0, 'asc']],
                    "bServerSide": true,
                    "bProcessing": true,
                    "responsive": true,
                    "bAutoWidth": false,
                    "aLengthMenu": [10, 30, 50, 100],
                    "pageLength": 10,
                    "sAjaxSource": '@Url.Action("CustSubSegmentData", "CustomerManager")' + '?type=mme',
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "POST",
                            "url": sSource,
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                    "sPaginationType": "simple_numbers",//"full_numbers",
                    "aoColumns": [
                                { "sName": "CIF", "bSortable": false },
                                { "sName": "NAME", "bSortable": false },
                                { "sName": "VPB INDUSTRY", "bSortable": false },
                                { "sName": "DATE OPEN CIF", "bSortable": false },
                                { "sName": "INFO", "bSortable": false }],
                    "aoColumnDefs": [{
                        "aTargets": [4],
                        "mRender": function (data, type, full) {
                            return '<a class=\"btn btn-primary btn-xs\" onclick=\"showCustomerInfo(\'' + full[0] + '\');\"><i class="fa fa-info"></i></a>';
                        }
                    }]
                });
                var dataSearch_sme = [{ id: 0, text: 'CIF' }, { id: 1, text: 'Name' }, { id: 2, text: 'VPB Insdustry' }];
                $(".search_column_sme").select2({
                    placeholder: "Select column",
                    data: dataSearch_sme
                });

                table_sme.columns().every(function () {
                    var that = this;

                    $('#sme_search_textbox').on('keyup change', function () {
                        if ($(".search_column_sme").val() == "") {
                            $("#parsley_search_column_sme").show();
                            this.value = "";
                        } else {
                            if (that.index() == $(".search_column_sme").val()) {
                                that.search(this.value).draw();
                            }
                        }

                    });
                    $(".search_column_sme").on("change", function (e) {
                        $("#parsley_search_column_sme").hide();
                        $('#sme_search_textbox').val('');
                        that.search('').draw();
                    });
                });
            })
        </script>
            break;
        default:
            break;
    }
    @if (true)
    {
        <script type="text/javascript">
            function showCustomerInfo(cif) {
                $.ajax({
                    url: '@Url.Action("CustomerInfo", "CustomerManager")',
                    type: "POST",
                    data: { cif: cif },
                    success: function (data_response) {
                        if (data_response.length > 0) {
                            var dataInfo = data_response[0];
                            $('#cust_info_industry').text(dataInfo['industry']);
                            $('#cust_info_name').text(dataInfo['custName']);
                            $('#cust_info_address').text(dataInfo['address']);
                            $('#cust_info_phone').text(dataInfo['phone']);
                            $('#cust_info_fax').text(dataInfo['fax']);
                            $('#cust_info_office').text(dataInfo['office']);
                            $('#cust_info_landline').text(dataInfo['landLine']);
                            $('#cust_info_email').text(dataInfo['email']);
                        }
                        $('.cm-cp-customer-info').modal('show');
                    }
                })

            };
        </script>
    }
}